// 下⾯color函数以及 shade tin是css的color-mod函数
// 了解⽂档 http://cdn1.w3cplus.com/css4/colormod.html
/* 'color(#11A983 shade(10%))' => 'rgb(15, 152, 118)'
'color(#11A983 tint(10%))' => 'rgb(41, 178, 143)'
'color(#11A983 tint(20%))' => 'rgb(65, 186, 156)'
'color(#11A983 tint(30%))' => 'rgb(88, 195, 168)'
'color(#11A983 tint(40%))' => 'rgb(112, 203, 181)'
'color(#11A983 tint(50%))' => 'rgb(136, 212, 193)'
'color(#11A983 tint(60%))' => 'rgb(160, 221, 205)'
'color(#11A983 tint(70%))' => 'rgb(184, 229, 218)'
'color(#11A983 tint(80%))' => 'rgb(207, 238, 230)'
'color(#11A983 tint(90%))' => 'rgb(231, 246, 243)'
// 利⽤css-color-function转换为rgb
import color from 'css-color-function'
color.convert('color(#11A983 shade(10%))') // 'rgb(15, 152, 118)' */
import color from "css-color-function"
const formula: { [prop: string]: string } = {
  "primary-light-1": "color(primary tint(10%))",
  "primary-light-2": "color(primary tint(20%))",
  "primary-light-3": "color(primary tint(30%))",
  "primary-light-4": "color(primary tint(40%))",
  "primary-light-5": "color(primary tint(50%))",
  "primary-light-6": "color(primary tint(60%))",
  "primary-light-7": "color(primary tint(70%))",
  "primary-light-8": "color(primary tint(80%))",
  "primary-light-9": "color(primary tint(90%))"
}
const generateColors = (primary: string) => {
  const colors: Record<string, string> = {}
  Object.keys(formula).forEach((key) => {
    const value = formula[key].replace(/primary/g, primary)
    colors[key] = color.convert(value) // 转换成rgba颜色值
  })
  return colors
}

const setColors = (colors: Record<string, string>) => {
  const el = document.documentElement
  Object.entries(colors).map(([key, value]) => {
    el.style.setProperty(`--el-color-${key}`, value)
  })
}

export { generateColors, setColors }
